<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title th:text="${video.title}"></title>
    <meta name="referrer" content="no-referrer">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.slim.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/p2p-ckplayer@latest/ckplayer/ckplayer.min.js"></script>
</head>
<body>

<div>
    <div th:replace="common/header"></div>
</div>

<div class="container">
    <h4>请复制播放链接到浏览器中打开</h4>
    <h4>请全屏 并且 将手机横屏，即可全屏播放</h4>
    <div class="video" style="width: 100%;height: 350px;"></div>

    <div>
        扫描二维码，加关注，不迷路，谢谢
        <img src="https://mp.weixin.qq.com/mp/qrcode?scene=10000004&size=102&__biz=MzA3MTQzMjYzNw==&mid=300070811&idx=1&sn=34b400eef638af64e80a69e8aa0f25b1&send_time=1582615239"
             alt="微信搜索 MAOPUYU">
    </div>
    <span style="margin: 10px" th:each="video: ${videos}">
        <a class="btn btn-secondary" style="margin: 5px" th:href="'/video/play?id='+${video.id}" role="button">
            <span th:text="${video.title}"></span>
        </a>
    </span>
</div>

<script th:inline="javascript">
    /*<![CDATA[*/
    var player = cyberplayer("playercontainer").setup({
        width: '100%',
        height: 360,
        file: [[${video.m3u8Uri}]], // 多码率hls地址
        image: [[${video.thumb}]],
        autostart: true,
        stretching: "uniform",
        volume: 100,
        controls: true,
        ak: "cc27d1a2537f451fa8392b9682c8de39" // 公有云平台注册即可获得accessKey
    });
    /*]]>*/
</script>


<script>
    var _hmt = _hmt || [];
    (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?d529cdea3dbfbc0275c3fee2c0d8c528";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>

</body>
</html>
